<template>
  <view v-if="proto" class="proto-detail-page">
    <nut-swiper
      :init-page="0"
      :loop="true"
      pagination-color="#fa1234"
      auto-play="3000"
      height="max-content"
      :pagination-visible="true"
    >
      <nut-swiper-item v-for="(image, index) in proto.doudian_product.imgs" :key="index">
        <image style="width: 100%; margin: 0" mode="widthFix" :src="image" />
      </nut-swiper-item>
    </nut-swiper>
    <view style="margin-top: -7px; z-index: 2">
      <view class="countdown-part-box">
        <text class="mr-1">剩余</text>
        <nut-countdown v-model="resetTime" :end-time="proto.link_expire_at">
          <div class="countdown-part-box">
            <div class="part-item h">{{ resetTime.d }}</div>
            <div class="part-item-symbol">天</div>
            <div class="part-item h">{{ resetTime.h }}</div>
            <span class="part-item-symbol">:</span>
            <div class="part-item m">{{ resetTime.m }}</div>
            <span class="part-item-symbol">:</span>
            <div class="part-item s">{{ resetTime.s }}</div>
          </div>
        </nut-countdown>
        <view class="ml-1">结束</view>
      </view>
    </view>
    <view class="proto-detail-content">
      <view class="px-2 mt-1">
        <text class="proto-title">{{ proto.doudian_product.title }}</text>
      </view>
      <nut-grid :column-num="3" :border="false">
        <nut-grid-item>
          <view class="dpc-center-center proto-detail-content-price">
            <text class="proto-detail-content-price-tip">销售价</text>
            <view class="proto-detail-content-price-primary">
              <text class="proto-detail-content-price-cny">¥</text>
              <money :value="proto.doudian_product.price" />
            </view>
          </view>
        </nut-grid-item>
        <nut-grid-item>
          <view class="dpc-center-center proto-detail-content-price">
            <text class="proto-detail-content-price-tip">预估赚</text>
            <view class="proto-detail-content-price-primary">
              <text class="proto-detail-content-price-cny">¥</text>
              <money :value="proto.commission" />
            </view>
          </view>
        </nut-grid-item>
        <nut-grid-item>
          <view class="dpr-center-sb">
            <view class="dpc-center-center commission-ratio">
              <text class="proto-detail-content-price-tip">佣金</text>
              <view class="proto-detail-content-price-primary">
                <text v-text="proto.commission_ratio" />
                <text>%</text>
              </view>
            </view>
            <view class="dpc-center-center cos-ratio">
              <text class="cos-ratio-tip">公开</text>
              <view class="cos-ratio-value">
                <text v-text="proto.doudian_product.cos_ratio" />
                <text>%</text>
              </view>
            </view>
          </view>
        </nut-grid-item>
      </nut-grid>
      <nut-grid direction="horizontal" :icon-size="16" :column-num="4">
        <nut-grid-item icon="star" text="收藏" @click="handleCollectProto" />
        <nut-grid-item>
          <nut-button open-type="share" class="share-button" icon="share"> 分享 </nut-button>
        </nut-grid-item>
        <nut-grid-item icon="link" text="链接" @click="copyProtoLink" />
        <nut-grid-item icon="scan" text="海报" @click="markProtoPoster" />
      </nut-grid>
      <view>
        <view class="term-info">
          <view
            >要求橱窗销量
            <text>≥{{ proto.showcase_sales_term }}</text>
          </view>
          <view
            >要求粉丝数量
            <text>≥{{ proto.fans_term }}</text>
          </view>
          <view
            >样品库存剩余
            <text> {{ proto.stock }}</text>
          </view>
        </view>
      </view>
      <empty-line height="5" />
      <task-flow class="py-2" />
      <empty-line />
      <mark-card title="销售数据" is-link desc="近30日转化率10%" @link-click="showDataChart = true">
        <nut-grid column-num="4" :border="false" class="proto-detail-content-sales-info">
          <nut-grid-item class="dpc-center-center" text="昨日销量">
            <template #icon>
              <text>30</text>
            </template>
          </nut-grid-item>
          <nut-grid-item text="7天销量">
            <template #icon>
              <text>20</text>
            </template>
          </nut-grid-item>
          <nut-grid-item text="30天销量">
            <template #icon>
              <text>303</text>
            </template>
          </nut-grid-item>
          <nut-grid-item text="累计销量">
            <template #icon>
              <text>3440</text>
            </template>
          </nut-grid-item>
        </nut-grid>
      </mark-card>
      <empty-line />
      <mark-card title="商品信息">
        <view class="dpc-center-start" style="font-size: 14px">
          <text></text>
          <view
            >发货地址 <text class="tip-text">{{ proto.doudian_product.logistics_info || '-' }}</text></view
          >
          <view
            >发货时间 <text class="tip-text">{{ proto.delivery_time || '-' }}</text></view
          >
          <view
            >发货地区 <text class="tip-text">{{ proto.not_delivery_address || '-' }}</text></view
          >
          <view
            >禁发地区 <text class="tip-text">{{ proto.not_delivery_address || '-' }}</text></view
          >
        </view>
      </mark-card>
      <empty-line />
      <view class="pa-3">
        <view
          class="dpr-center-sb pb-2"
          @click="Taro.navigateTo({ url: `/pages/shop/index?id=${proto.doudian_product.shop.id}` })"
        >
          <view class="dpr-center-center">
            <nut-avatar :url="proto.doudian_product.shop.logo" />
            <text style="font-size: 17px; padding-left: 8px">{{ proto.doudian_product.shop.shop_name }}</text>
          </view>
          <nut-icon name="right" size="12" color="#909090" />
        </view>
        <view style="font-size: 14px">
          <view>店铺销量：<text style="color: #fa2c19" v-text="proto.doudian_product.shop.sales" /> </view>
          <view>商家服务：<text style="color: #fa2c19" v-text="proto.doudian_product.shop.shop_score" /> </view>
          <view>商品体验：<text style="color: #fa2c19" v-text="proto.doudian_product.shop.product_score" /> </view>
          <view>物流体验：<text style="color: #fa2c19" v-text="proto.doudian_product.shop.logistics_score" /> </view>
        </view>
      </view>
      <empty-line />
      <mark-card title="亮点推荐">
        <view> </view>
        <view class="dpr-center-sb">
          <text style="font-weight: bold; color: #fa2c19">商品卖点</text>
          <nut-button plain size="small" type="danger" @click="copySellingText">复制内容</nut-button>
        </view>
        <view>
          <text>{{ proto.selling_text }}</text>
        </view>
      </mark-card>
      <empty-line />
      <mark-card title="商品评价" is-link :desc="`${23}人已评｜好评率${93}%`">
        <nut-comment
          images-rows="multi"
          :images="cmt.images"
          :videos="cmt.videos"
          :info="cmt.info"
          :follow="cmt.follow"
          @clickImages="clickImages"
        ></nut-comment>
      </mark-card>
      <empty-line />
      <mark-card title="推荐商品">
        <view>
          <view>商品详情</view>
        </view>
        <view style="height: 150px"></view>
      </mark-card>
    </view>
    <proto-poster
      v-if="showPoster"
      ref="poster"
      :proto="proto"
      style="position: absolute; left: -99999px"
      @close="showPoster = false"
    />
    <nut-tabbar safe-area-inset-bottom bottom>
      <view class="dpr-center-sb full-width px-3">
        <view class="dpc-center-center" @click="handleAddToCart">
          <nut-icon name="cart" size="18" color="#505050"></nut-icon>
          <text style="font-size: 10px; color: #505050">加入选品</text>
        </view>
        <nut-button style="height: 37px" type="primary" plain @click="handleAddToShowcase">添加橱窗</nut-button>
        <view class="dpr-center-center">
          <nut-button
            style="border-top-right-radius: 0; border-bottom-right-radius: 0"
            type="primary"
            disabled
            @click="handleBuyProto"
            >购买样品
          </nut-button>
          <nut-button
            style="border-top-left-radius: 0; border-bottom-left-radius: 0"
            type="primary"
            @click="handleTakeProto"
            >免费领样
          </nut-button>
        </view>
      </view>
    </nut-tabbar>
  </view>
</template>

<script setup lang="ts">
import './index.less';
import Taro, { useDidShow, useLoad } from '@tarojs/taro';
import { onMounted, proxyRefs, reactive, ref } from 'vue';
import { getProtoDetailApi, ProtoType } from '@/api/proto';
import Money from '@/components/money/index.vue';
import ProtoPoster from '@/components/proto-poster/index.vue';
import TaskFlow from '@/components/task-flow/index.vue';
import EmptyLine from '@/components/empty-line/index.vue';
import MarkCard from '@/components/mark-card/index.vue';

const currentTab = ref('0');
const resetTime = reactive({
  d: '00',
  h: '00',
  m: '00',
  s: '00',
});
const showDataChart = ref(false);
const showPoster = ref(false);
const proto = ref<ProtoType>(null);
const getProtoDetail = (id) => {
  if (!id) {
    return;
  }
  getProtoDetailApi({ id }).then((res) => {
    if (res.success) {
      proto.value = res.result;
      Taro.setNavigationBarTitle({ title: proto.value.doudian_product.title });
    }
  });
};
const cmt = ref({
  images: [],
  videos: [],
  follow: [],
});
const clickImages = (imgs) => {
  console.log('进行图片展示', imgs);
};

const markProtoPoster = () => {
  showPoster.value = !showPoster.value;
};

onMounted(() => {
  Taro.request({
    url: 'http://storage.360buyimg.com/nutui/3x/comment_data.json',
    success: (res) => {
      cmt.value = res.data.Comment;
      console.log(res);
    },
  }).catch((err) => console.log('Oh, error', err));
});
const copyProtoLink = () => {
  Taro.setClipboardData({
    data: proto.value.share_link,
    success: () => {
      Taro.showToast({ title: '复制成功' });
    },
  });
};
const copySellingText = () => {
  Taro.setClipboardData({
    data: proto.value.selling_text,
    success: () => {
      Taro.showToast({ title: '复制成功' });
    },
  });
};
const handleCollectProto = () => {
  Taro.showToast({ title: '收藏成功', icon: 'success' });
};
const handleAddToCart = () => {
  Taro.showToast({ title: '添加成功', icon: 'success' });
};
const handleAddToShowcase = () => {
  Taro.showToast({ title: '请先添加达人账号', icon: 'error' });
};
const handleBuyProto = () => {
  Taro.showToast({ title: '请先添加达人账号', icon: 'error' });
};
const handleTakeProto = () => {
  Taro.showToast({ title: '请先添加达人账号', icon: 'error' });
};
useDidShow(() => {
  showPoster.value = false;
});
useLoad(() => {
  const { id } = Taro.getCurrentInstance().router.params;
  getProtoDetail(id);
});
</script>

<style lang="less" scoped></style>
